<template>
  <div class="monitor-screen-box-middle-1">
    <CompBox style="height: 230px;width: 358px" :title="devInfo.name">
      <div class="map-tooltip-exit" @click="$emit('exit')">
        <img src="@/assets/cloudV2/img/pop-exit.png" style="width: 100%;height: 100%;"/>
      </div>
      <div class="map-tooltip-main">
        <div class="map-tooltip-main-warning">
          <div class="warning-info">
            <div class="warning-num">生产持续时间</div>
            <div class="warning-num-each">
              <div class="warning-num-each-bg">1</div>
              <div class="warning-num-each-bg">1</div>
              <div class="warning-num-each-bg">1</div>
              <div class="warning-num-each-bg">1</div>
            </div>
          </div>
          <div class="warning-info">
            <div class="warning-num">报警次数</div>
            <div class="warning-num-each">
              <div class="warning-num-each-bg">2</div>
              <div class="warning-num-each-bg">2</div>
              <div class="warning-num-each-bg">2</div>
              <div class="warning-num-each-bg">2</div>
            </div>
          </div>
          <div class="warning-info changeWidth">
            <div class="warning-num">稼动率</div>
            <div class="warning-num-each">
              {{ (devInfo.utilization * 100).toFixed(2) + '%' }}
            </div>
          </div>
        </div>

        <div class="map-tooltip-main-info">
          <div class="map-tooltip-main-info-item">
            <div class="map-tooltip-main-info-item-imgbox">
              <img src="@/assets/cloudV2/img/device-sn.png" alt="">
            </div>
            <span class="map-tooltip-main-info-item-sn">设备编号</span>
            <div class="map-tooltip-main-info-item-address">
              <div>{{ devInfo.number }}</div>
            </div>
          </div>
          <div class="map-tooltip-main-info-item">
            <div class="map-tooltip-main-info-item-imgbox">
              <img src="@/assets/cloudV2/img/template.png" alt="">
              <!--            <img src="" alt="">-->
            </div>
            <span class="map-tooltip-main-info-item-sn">设备类型</span>
            <div class="map-tooltip-main-info-item-address">
              <div>{{ label }}</div>
            </div>
          </div>
          <div class="map-tooltip-main-info-item">
            <div class="map-tooltip-main-info-item-imgbox">
              <img src="@/assets/cloudV2/img/location.png" alt="">
              <!--            <img src="" alt="">-->
            </div>
            <div class="map-tooltip-main-info-item-sn">设备地址</div>
            <div class="map-tooltip-main-info-item-address">
              <div>{{ devInfo.address }}</div>
            </div>
          </div>
        </div>
        <div class='map-tooltip-footer' @click="$emit('openMonitor',devInfo.id)">
          <div class="map-tooltip-footer-imgbox">
            <img src="@/assets/cloudV2/img/device-eye.png" alt="">
            <!--          <img src=${$this.deviceEye} alt="">-->
          </div>
          <span>查看监控</span>
        </div>
      </div>
    </CompBox>
  </div>

</template>

<script setup>
import CompBox from "@/views/screen/component/CompBox.vue";
import {computed, onMounted, ref, watch} from "vue";
import {getDicts} from "../../../api/system/dict/data";

const props = defineProps({
  devInfo: Object
})
const label = ref()
onMounted(()=>{
  getDevType()
})
watch(()=>props.devInfo,()=>{
  getDevType()
})
function getDevType() {
  getDicts(props.devInfo.project == 0 ? 'device_robot_type' : 'device_cut_type').then((res)=>{
    res.data.forEach((i) => {
      if (props.devInfo.type == i.dictValue) {
        label.value = i.dictLabel
      }
    })
  })
}
// const deviceType = computed(async () => {
//   return label.value
// })
</script>

<style scoped>
.monitor-screen-box-middle-1 {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999999;
}

.map-tooltip-main {
  margin-top: 33px;
  padding-left: 14px;
  pointer-events: auto !important;
}

.map-tooltip-main-warning {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(8, 99, 131, .8);
}

.warning-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.warning-num {
  margin-bottom: 6px;
  font-weight: bold;
  color: #32EBCA;
}

.warning-num-each {
  line-height: 30px;
  display: flex;
  color: #34ECCB;
}

.warning-num-each-bg {
  margin-right: 4px;
  width: 20px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("@/assets/cloudV2/img/num-bg.png") no-repeat 50% 0;
}

.changeWidth {
  width: 96px;
}

.map-tooltip-main-info {
  padding: 10px 0 0;
  border-bottom: 1px solid rgba(8, 99, 131, .8);
}

.map-tooltip-main-info-item {
  width: 100%;
  line-height: 22px;
  display: flex;
  align-items: center;
  padding-bottom: 8px;
}

.map-tooltip-main-info-item-imgbox {
  width: 16px;
  height: 16px;
  margin-right: 14px;
  flex: 0 0 auto;
}

.map-tooltip-main-info-item-imgbox img {
  width: 100%;
  height: 100%;
}

.map-tooltip-main-info-item-sn {
  margin-right: 18px;
}

.map-tooltip-main-info-item-address {
  flex: 1 1 auto;
  width: 230px;
  /*overflow: hidden;*/
}

.map-tooltip-main-info-item-address div {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-tooltip-footer-imgbox {
  width: 14px;
  margin-right: 6px;
}

.map-tooltip-footer-imgbox img {
  width: 14px;
}

.map-tooltip-footer {
  position: absolute;
  bottom: 6px;
  right: 16px;
  color: #23A6DD;
  cursor: pointer;
  display: flex;
  align-items: center;
  pointer-events: auto !important;
}

.map-tooltip-exit {
  position: absolute;
  cursor: pointer;
  width: 24px;
  height: 24px;
  top: 3px;
  right: 3px;
  z-index: 9999999;
}
</style>